<template>
  <div class="createcpirse">
    <el-steps :active="activeStep" simple style="margin-top: 20px">
      <el-step title="1 课程基本信息" />
      <el-step title="2 课节设置" />
      <el-step title="3 完成" />
    </el-steps>
    <div style="margin:20px 0;">
      <el-form
        ref="createCourseForm"
        :model="createCourseForm"
        :rules="createCourseRules"
        label-width="100px"
      >
        <div v-if="activeStep==1">
          <el-form-item label="课程名称" prop="courseName">
            <el-input
              v-model="createCourseForm.courseName"
              maxlength="16"
              placeholder="最多只能输入16个字"
              style="width:400px;"
            />
          </el-form-item>
          <el-form-item label="授课模式" prop="teachingMode">
            <el-radio v-model="createCourseForm.teachingMode" label="班级">班级</el-radio>
            <el-tooltip class="item" effect="light" content="敬请期待" placement="right">
              <el-radio v-model="createCourseForm.teachingMode" label="1对1" disabled>1对1</el-radio>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="收费模式" prop="chargeMode">
            <el-checkbox-group v-model="createCourseForm.chargeMode">
              <el-checkbox label="按课时" />
              <el-checkbox label="按时段" />
              <el-checkbox label="按班级" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="收费标准" prop="chargeStandard">
            <div class="chargeStandard">
              <div v-if="createCourseForm.chargeMode.indexOf('按课时')> -1">
                <el-table
                  :data="createCourseForm.hourTable"
                  :header-cell-style="{background:'#fafbfc',color:'#606266'}">
                  <el-table-column label="课时" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.hourValue" size="small" style="width:80px;" />
                      <span class="suffix">课时</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="价格" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.priceValue" size="small" style="width:80px;" />
                      <span class="suffix">元</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button type="text" @click="hourRemove(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="add-foot">
                  <el-button type="text" icon="el-icon-plus" @click="addHour">添加课时</el-button>
                </div>
              </div>
              <div v-if="createCourseForm.chargeMode.indexOf('按时段')> -1">
                <el-table
                  :data="createCourseForm.timeTable"
                  :header-cell-style="{background:'#fafbfc',color:'#606266'}"
                >
                  <el-table-column label="时段" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.timeValue" size="small" class="timeInput">
                        <template slot="append">
                          <el-select v-model="scope.row.periodValue" placeholder="请选择">
                            <el-option
                              v-for="item in periodOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            />
                          </el-select>
                        </template>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="价格" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.priceValue" size="small" style="width:80px;" />
                      <span class="suffix">元</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button type="text" @click="timeRemove(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="add-foot">
                  <el-button type="text" icon="el-icon-plus" @click="addTime">添加课时</el-button>
                </div>
              </div>
              <div v-if="createCourseForm.chargeMode.indexOf('按班级')> -1">
                <el-table
                  :data="createCourseForm.classTable"
                  :header-cell-style="{background:'#fafbfc',color:'#606266'}"
                >
                  <el-table-column label="班级" align="center">
                    <template slot-scope="scope">
                      <span>每班</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="价格" align="center">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.priceValue" size="small" style="width:80px;" />
                      <span class="suffix">元</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-form-item>
        </div>
        <div v-if="activeStep==2">
          <el-button icon="el-icon-plus" @click="courseKnobDialog=true">新增课节</el-button>
          <div v-for="(item,index) in createCourseForm.knobList" :key="index" class="knob-list">
            <div class="knob-title">{{ item.knobName }}</div>
            <div class="knob-btn">
              <el-button type="text" @click="courseKnobDialog=true">编辑</el-button>
              <el-button type="text">删除</el-button>
            </div>
          </div>
        </div>
        <div v-if="activeStep==3">
          <div class="success-box">
            <i class="el-icon-circle-check" />
            <div class="success-hint">新建成功，您可对课程排课生成课程表，也可直接售卖快速开展招生</div>
            <div class="success-btn">
              <el-button @click="goSell">发布售卖</el-button>
              <el-button type="primary" @click="goArrangeCourse">排课</el-button>
            </div>
          </div>
        </div>
      </el-form>
      <div v-if="activeStep!==3" class="stepBtn">
        <el-button v-if="activeStep==1">取消</el-button>
        <el-button v-if="activeStep==1" type="primary" @click="nextStep">下一步</el-button>
        <el-button v-if="activeStep==2" @click="activeStep-=1">上一步</el-button>
        <el-button v-if="activeStep==2" type="primary" @click="saveForm">保存</el-button>
      </div>
      <el-dialog :visible.sync="courseKnobDialog" title="新建课节" width="800px">
        <el-form ref="knobForm" :model="knobForm" label-width="100px">
          <el-form-item label="课节名称" prop="knobName">
            <el-input
              v-model="knobForm.knobName"
              maxlength="16"
              placeholder="请输入课节名称"
              style="width:400px"
            />
          </el-form-item>
          <el-form-item label="预约限制" prop="appointmentLimit">
            <el-radio v-model="knobForm.appointmentLimit" label="open">开启</el-radio>
            <el-radio v-model="knobForm.appointmentLimit" label="close">关闭</el-radio>
            <div>开启后一个学员只能预约该课节的一个日程</div>
          </el-form-item>
          <el-form-item label="课节详情" prop="knobInfo">
            <tinymce v-model="knobForm.knobInfo" :height="150" style="width:600px;" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="courseKnobDialog = false">取 消</el-button>
          <el-button type="primary" @click="knobConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce' // 富文本组件

export default {
  components: {
    Tinymce
  },
  data() {
    return {
      courseId: '',
      activeStep: 1,
      createCourseForm: {
        courseName: '',
        teachingMode: '班级',
        chargeMode: [],
        knobList: [
          {
            knobName: '第一节',
            appointmentLimit: 'open',
            knobInfo: '第一节详情'
          }
        ],
        hourTable: [
          {
            hourValue: '',
            priceValue: ''
          }
        ],
        timeTable: [
          {
            timeValue: '',
            periodValue: 'day',
            priceValue: ''
          }
        ],
        classTable: [
          {
            priceValue: ''
          }
        ]
      },
      knobForm: {
        knobName: '',
        appointmentLimit: 'open',
        knobInfo: ''
      },
      periodOptions: [
        {
          value: 'day',
          label: '天'
        },
        {
          value: 'month',
          label: '月'
        },
        {
          value: 'season',
          label: '季'
        },
        {
          value: 'year',
          label: '年'
        }
      ],
      createCourseRules: {
        courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
        teachingMode: [{ required: true, message: '请选择授课模式', trigger: 'change' }],
        chargeMode: [{ type: 'array', required: true, message: '请至少选择一种收费模式', trigger: 'change' }],
        hourTable: [
          {
            hourValue: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
          }
        ]
      },
      courseKnobDialog: false
    }
  },
  mounted() {
    this.courseId = this.$route.query.courseId
  },
  methods: {
    mapList(check) {
      return this.createCourseForm.chargeMode.map((res) => {
        if (res === check) return true
      })[0]
    },
    hourRemove(index) {
      if (this.createCourseForm.hourTable.length > 1) {
        this.createCourseForm.hourTable.splice(index, 1)
      } else {
        this.$message.error('至少保留一条数据')
      }
    },
    addHour() {
      this.createCourseForm.hourTable.push({
        hourValue: '',
        priceValue: ''
      })
    },
    timeRemove(index) {
      if (this.createCourseForm.timeTable.length > 1) {
        this.createCourseForm.timeTable.splice(index, 1)
      } else {
        this.$message.error('至少保留一条数据')
      }
    },
    addTime() {
      this.createCourseForm.timeTable.push({
        timeValue: '',
        periodValue: 'day',
        priceValue: ''
      })
    },
    knobConfirm() {
      var knobObj = JSON.parse(JSON.stringify(this.knobForm))
      this.createCourseForm.knobList.push(knobObj)
      this.knobForm.knobInfo = ''
      this.$refs.knobForm.resetFields()
      this.courseKnobDialog = false
    },
    // 下一步
    nextStep() {
      var isSubmit = true
      if (this.createCourseForm.chargeMode.indexOf('按课时') > -1) {
        this.createCourseForm.hourTable.map((item) => {
          if (!item.hourValue || !item.priceValue) {
            this.$message({
              message: '请填写课时和价格',
              type: 'warning'
            })
            isSubmit = false
          }
        })
      }
      if (this.createCourseForm.chargeMode.indexOf('按时段') > -1) {
        this.createCourseForm.timeTable.map((item) => {
          if (!item.timeValue || !item.priceValue) {
            this.$message({
              message: '请填写时段和价格',
              type: 'warning'
            })
            isSubmit = false
          }
        })
      }
      if (this.createCourseForm.chargeMode.indexOf('按班级') > -1) {
        this.createCourseForm.classTable.map((item) => {
          if (!item.priceValue) {
            this.$message({
              message: '请填写班级价格',
              type: 'warning'
            })
            isSubmit = false
          }
        })
      }
      this.$refs.createCourseForm.validate((valid) => {
        if (valid) {
          if (isSubmit) {
            console.log('验证通过')
            this.activeStep += 1
          }
        } else {
          return false
        }
      })
    },
    // 保存
    saveForm() {
      this.activeStep += 1
    },
    // 发布售卖
    goSell() {
      this.$router.push({ name: 'Recruit' })
    },
    goArrangeCourse() {
      this.$router.push({ name: 'Aligncourse' })
    }
  }
}
</script>

<style lang="scss" scoped>
.createcpirse {
  padding: 0 20px;
  padding-bottom: 50px;

  .stepBtn {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: calc(100vw - 180px);
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #eee;
    text-align: center;
    background-color: #fff;
    z-index: 9;
  }
  .suffix {
    margin-left: 10px;
  }
  .chargeStandard {
    width: 500px;
    /deep/.el-table td,
    /deep/.el-table th {
      padding: 0;
    }
    /deep/.el-table__body {
      .el-table__row {
        height: 50px;
      }
    }
    .add-foot {
      text-align: center;
      border-bottom: 1px solid #eee;
      margin-bottom: 30px;
    }
    .timeInput {
      width: 150px;
      /deep/.el-input-group__append,
      .el-input-group__prepend {
        background-color: #fff;
        /* color: #909399; */
        vertical-align: middle;
        display: table-cell;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 0px 16px;
        width: 60px;
        white-space: nowrap;
      }
    }
  }
  .knob-list {
    display: flex;
    justify-content: space-between;
    height: 55px;
    margin: 10px 0;
    padding: 0 20px;
    line-height: 55px;
    background: #f5f7fa;
    .knob-title {
    }
    .knob-btn {
    }
  }
  .success-box {
    margin-top: 200px;
    text-align: center;
    i {
      font-size: 50px;
      color: #2fce75;
    }
    .success-hint {
      color: #353535;
      font-size: 14px;
      margin-top: 20px;
    }
    .success-btn {
      margin-top: 50px;
    }
  }
}
</style>
